<template>
  <el-card class="article-card" shadow="hover" :body-style="{ padding: '0px' }">
    <div class="article-header" v-if="article.image">
      <img :src="article.image" alt="文章图片" class="article-image" />
    </div>
    
    <div class="article-meta">
      <span class="article-category" :class="getCategoryClass(article.category)">{{ article.category || '未分类' }}</span>
      <span class="article-date">{{ formatDate(article.createdAt) }}</span>
    </div>
    
    <div class="article-title">
      <h3>{{ article.title }}</h3>
    </div>
    
    <div class="article-excerpt" v-if="article.excerpt">
      <p>{{ article.excerpt }}</p>
    </div>
    
    <div class="article-content" v-else>
      <p>{{ truncate(article.content, 200) }}...</p>
    </div>
    
    <div class="article-footer">
      <div class="article-author">
        <el-avatar :size="36" :src="authorAvatar" />
        <span class="author-name">{{ article.author }}</span>
      </div>
      
      <div class="article-actions">
        <el-button type="text" size="small" @click="goToDetail">{{ '阅读全文' }}</el-button>
        <el-button type="text" size="small" @click="openComment">{{ '评论' }}({{ article.commentCount || 0 }})</el-button>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'

// 接收文章数据
const props = defineProps({
  article: {
    type: Object,
    required: true
  }
})

const router = useRouter()

// 计算作者头像
const authorAvatar = computed(() => {
  const initials = props.article.author?.charAt(0)?.toUpperCase() || 'U'
  return `https://picsum.photos/100/100?random=${initials}`
})

// 格式化日期
const formatDate = (dateString: string | undefined) => {
  if (!dateString) return ''
  
  const date = new Date(dateString)
  return date.toLocaleDateString() + ' ' + date.toLocaleTimeString()
}

// 截断字符串
const truncate = (str: string, length: number) => {
  if (!str) return ''
  return str.length > length ? str.substring(0, length) : str
}

// 获取分类样式
const getCategoryClass = (category: string | undefined) => {
  const categoryMap: Record<string, string> = {
    '国内新闻': 'category-domestic',
    '国际新闻': 'category-international',
    '科技新闻': 'category-technology',
    '娱乐新闻': 'category-entertainment',
    '体育新闻': 'category-sports'
  }
  return categoryMap[category || ''] || ''
}

// 前往文章详情页
const goToDetail = () => {
  router.push(`/article/${props.article.id}`)
}

// 打开评论
const openComment = () => {
  goToDetail()
}
</script>

<style scoped>
.article-card {
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.article-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.article-header {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.article-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.article-card:hover .article-image {
  transform: scale(1.05);
}

.article-meta {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px 0;
  font-size: 14px;
  color: #909399;
}

.article-category {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: white;
}

.category-domestic {
  background-color: #409EFF;
}

.category-international {
  background-color: #67C23A;
}

.category-technology {
  background-color: #E6A23C;
}

.category-entertainment {
  background-color: #909399;
}

.category-sports {
  background-color: #E67E22;
}

.article-title {
  padding: 15px 20px 0;
}

.article-title h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  transition: color 0.3s ease;
}

.article-card:hover .article-title h3 {
  color: #409EFF;
}

.article-excerpt,
.article-content {
  padding: 10px 20px;
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.article-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-top: 1px solid #ebeef5;
}

.article-author {
  display: flex;
  align-items: center;
}

.author-name {
  margin-left: 10px;
  font-size: 14px;
  color: #606266;
}

.article-actions {
  display: flex;
  align-items: center;
}

.article-actions .el-button {
  padding: 0 5px;
  font-size: 14px;
  color: #909399;
}

.article-actions .el-button:hover {
  color: #409EFF;
}
</style>